<template>
    <el-menu :collapse="menuCollapse" active-text-color="#ffd04b" background-color="#2e3e52" unique-opened router
        class="el-menu-vertical-demo" :default-active="defaultActive" text-color="#fff">
        <el-menu-item :index="'/index'">
            <i class="iconfont homepage"></i>
            <span>
                首页
            </span>
        </el-menu-item>
        <el-sub-menu :index="index + ''" v-for="item, index in userInfo.getMenuRoutrs" :key="item.id">
            <template #title>
                <i class="iconfont" :class="item.icon"></i>
                <span>{{ item.title }}</span>
            </template>
            <template v-for="citem in item.children" :key="citem.id">
                <el-menu-item-group v-if="!citem.hidden">
                    <el-menu-item :index="'/' + item.name + '/' + citem.name">
                        <i class="iconfont" :class="citem.icon"></i>
                        {{ citem.title
                        }}</el-menu-item>
                </el-menu-item-group>
            </template>
        </el-sub-menu>
    </el-menu>
</template>

<script setup lang="ts">
import { useUserInfoStore } from "@/store/useStore"
import { inject } from "vue";

const userInfo = useUserInfoStore()
const menuCollapse = inject("menuCollapse", false)
withDefaults(
    defineProps<{ defaultActive: string }>(), {
    defaultActive: "/index"
}
)
</script>

<style scoped lang="less">
.el-menu {
    border-right: none;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
}
</style>